doctype html
html(lang="en")
  | <!-- generated at #{Date()} -->
  head
    if process.env.NODE_ENV == 'production'
      base(href="/color-themes-for-google-code-prettify/")
    else
      base(href="/")
    meta(charset="utf-8")
    meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
    meta(http-equiv="x-ua-compatible" content="ie=edge")
    title Color themes for Google Code Prettify
    meta(name="description" content="The selection of various beautiful color themes for Google Code Prettify. Make your syntax highlighting of code snippets on your website more pretty!")
    link(rel="canonical" href="https://jmblog.github.io/color-themes-for-google-code-prettify/")
    link(rel="dns-prefetch" href="//fonts.googleapis.com")
    link(rel="dns-prefetch" href="//cdn.rawgit.com")
    script(src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js")
    link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Noto+Sans:400,700")
    link(rel="stylesheet" href='styles/styles.css')
    if process.env.NODE_ENV == 'production'
      script.
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-32033901-2', 'auto');
        ga('send', 'pageview');

  body
    header.cover
      .container
        h1.cover__title
          = 'Color themes'
          span.preposition
            = ' for '
          = 'Google Code Prettify'
        h2.cover__subtitle
          | Make your code snippets more pretty
        p.cover__buttons
          a.button.-large(href="https://github.com/jmblog/color-themes-for-google-code-prettify")
            i.octicon.octicon-mark-github
            | View on GitHub
    main
      .getting-started.segment.u-text-center
        .container
          h2
            | Installation

          p
            code.-shell npm install color-themes-for-google-code-prettify
          p
            = 'or '
          //- p
          //-   code.-shell bower install color-themes-for-google-code-prettify
          //- p
          //-   = 'or '
          p
            a.button.js-download-theme(href="themes.zip" data-theme-id="themes.zip")
              i.octicon.octicon-desktop-download
              | Download a zip file

  
      .segment.-striped
        .container
          h2.u-text-center
            | Previews
          .u-text-center
            .tabs
              a.tab.js-theme-filter.-selected(href="#" data-filter="") All
              a.tab.js-theme-filter(href="#" data-filter="dark") Dark themes
              a.tab.js-theme-filter(href="#" data-filter="light") Light themes
          each theme in themes
            .theme.js-theme(data-theme-type="#{theme.type}")
              .theme__info
                h3.theme__title
                  | #{theme.name}
                if theme.original
                  .theme__meta Original by !{theme.original}
                if theme.ported_by
                  .theme__meta Ported by !{theme.ported_by}
                
                .theme__download
                  a.button.-compact.-inverted.js-download-theme(href="themes/#{theme.id}.css" data-theme-id="#{theme.id}" target="_blank") .css
                  a.button.-compact.-inverted.js-download-theme(href="themes/#{theme.id}.min.css" data-theme-id="#{theme.id}.min" target="_blank") .min.css

              .theme__preview(id="#{theme.id}")
                pre.prettyprint.linenums.lang-html
                  code &lt;script type="text/javascript"&gt;
                    | // Say hello world until the user starts questioning
                    | // the meaningfulness of their existence.
                    | function helloWorld(world) {
                    |   for (var i = 42; --i >= 0;) {
                    |     alert('Hello ' + String(world));
                    |   }
                    | }
                    | &lt;/script&gt;
                    | &lt;style&gt;
                    | p { color: pink }
                    | b { color: blue }
                    | u { color: "umber" }
                    | &lt;/style&gt;

          h3 Are you looking for more themes?
          ul.list
            li: a(href="https://cdn.rawgit.com/google/code-prettify/master/styles/index.html") Google Code Prettify official theme gallery
            li: a(href="http://raphaelddl.github.io/google-prettify-monokai-theme/") Monokai theme by @RaphaelDDL
    footer
      .segment
        .container
          != '&copy; '
          a(href="https://github.com/jmblog/") Yoshihide Jimbo
          != ', Released under '
          a(href="http://jmblog.mit-license.org/") MIT License
    
    script(src="scripts/scripts.js")
